<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2024-04-18 15:44:27
 * @LastEditTime: 2024-07-08 11:57:56
 * @LastEditors:  Please set LastEditors
-->
<!-- eslint-disable no-console -->
<!-- eslint-disable no-console -->
<template>
    <view class="c_container">
        <u-popup mode="bottom" v-model="show" :border-radius="'20'" :mask="true">
            <view class="c_main">
                <view class="tit">点击充值</view>
                <view class="card">
                    <view class="item able" v-for="(s, index) in productList[currentSku]?.sku" :key="index"
                        @click="cardClick(index, s)">
                        <!-- <view class="name">{{ s.name }}</view> -->
                        <view class="price">
                            <text>{{ s.money }}</text>元
                        </view>
                    </view>
                </view>
                <!-- <u-button type="primary" @click="confirm" :custom-style="{
                    background: '#FF6C18'
                }">充值</u-button> -->
            </view>
        </u-popup>
    </view>
</template>
  
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue';
import { useUserStore } from '@/store'
import { productApi, orderApi } from '@/api';
import { dynamic_enum_type } from '@/api/enum';
import { storeToRefs } from 'pinia';
import { getCookie } from '@/utils/common';

const emit = defineEmits(['onConfirm'])
const userStore = useUserStore()
const { accessToken } = storeToRefs(userStore)
const props = withDefaults(
    defineProps<{
        isBack?: boolean
        device?: any
    }>(),
    {
        isBack: true,
        device: {}
    }
)
const show = ref(false)
const open = () => {
    show.value = true
    getProduct()
}
const shopId = 2881
const productList = ref([])
const currentSku = ref(0)
async function getProduct() {
    uni.showLoading()
    const { data } = await productApi.getShopProductList({
        noPaging: true,
        detail: false,
        shopId,
        shopType: 3,
        dynamicPrice: false
    }).finally(() => {
        uni.hideLoading()
    })
    productList.value = data;
    [productList.value[0]].forEach((product, index) => {
        getSkuList(product)
    })
}
async function getSkuList(product: any) {
    if (!product) return
    const { data } = await productApi.getShopProductSkuList({
        noPaging: true,
        detail: true,
        shopType: 3,
        shopId,
        productId: product.productId
    })
    data.sort((a: { money: number }, b: { money: number }) => {
        return a.money - b.money
    })
    product.sku = data || []
}
function cardClick(index: number, sku) {
    show.value = false
    const { money } = sku
    uni.showModal({
        title: '确认充值',
        content: `充值金额${money},充值成功后无法退款`,
        cancelText: '取消充值',
        confirmText: '确认充值',
        success: ({ confirm, cancel }) => {
            if (confirm) {
                submit(index)
            }
        }
    })
}
const submit = async (i: number) => {
    const shopProductSkuSelected = productList.value[currentSku.value]?.sku[i]
    const orderData = {
        orderProductSkus: [
            {
                count: 1,
                shopProductSkuId: shopProductSkuSelected.id,
                externalData: {
                    deviceId: props.device?.id
                    // account: account.value
                },
                shopProductSku: shopProductSkuSelected.value,
                name: shopProductSkuSelected.name,
                skuName: shopProductSkuSelected.productSku.name,
                skuImage: shopProductSkuSelected.productSku.image,
                money: shopProductSkuSelected.money,
                // moneyUnit: shopProductSkuWalletRule.moneyUnit || null,
                status: 0
            }
        ],
        detail: true
    }
    const { data } = await orderApi.orderAdd(orderData)
    // uni.setStorageSync('orderJson', JSON.stringify(data))
    // #ifdef H5
    // const { origin, hash } = location
    // uni.setStorageSync('callback_return_url', origin + hash)
    // #endif
    // uni.navigateTo({
    //     url: '/pages/payment/index?order=true'
    // })
    if (data) {
      location.href = `https://api.mylkjgs.com/?token=${accessToken.value || getCookie('HYToken') || ''}&orderId=${data.id}`
    }
}
defineExpose({ open })

</script>
  
<style lang="scss" scoped>
.c_container {
    .c_main {
        padding: 40rpx 40rpx 60rpx 40rpx;

        .tit {
            font-size: 40rpx;
            text-align: center;
            font-weight: bold;
            margin-bottom: 40rpx;
        }

        .desc {
            margin-top: 20rpx;
            margin-bottom: 50rpx;
        }

        .inpt {
            display: flex;
            justify-content: center;
            margin-bottom: 50rpx;
        }
    }

}

.card {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 30rpx;
    flex-wrap: wrap;

    .item {
        width: 30%;
        border: 1px solid #f5f5f5;
        border-radius: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100rpx;
        color: #bbb;

        &.able {
            background-color: #f5f5f5;
            color: #333;
        }

        .name {
            font-size: 28rpx;
            margin-bottom: 10rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        .price {
            font-size: 30rpx;

            text {
                font-size: 36rpx;
                font-weight: bold;
            }
        }
    }
}
</style>
  